<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>原生JS实现购物车结算功能代码</title>
  <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
  <div class="catbox">
    <table id="cartTable">
      <thead>
        <tr>
          <th><label>
              <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
          <th>商品</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr> -->
      </tbody>
    </table>
    <div class="foot" id="foot">
      <a class="fl" id="deleteAll" href="javascript:;">删除</a>
      <div class="fr closing" onclick="getTotal();">结 算</div>
      <input type="hidden" id="cartTotalPrice" />
      <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
      <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span
          class="arrow down">︾</span></div>
      <div class="selected-view">
        <div id="selectedViewList" class="clearfix">
          <div><img src="../images/1.jpg"><span>取消选择</span></div>
        </div>
        <span class="arrow">◆<span>◆</span></span>
      </div>
    </div>
  </div>
</body>
<script>

  var tbody = document.querySelector("#cartTable tbody");
  var addList = document.getElementsByClassName("add");
  var reduceList = document.getElementsByClassName("reduce");

  var xhr = new XMLHttpRequest();  //0

  xhr.open("get", "../date/shoppingCar.json", true);  // 1

  xhr.send();

  xhr.onreadystatechange = function () {
    // debugger;
    // 2  3   4 
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 获取数据
      var text = xhr.responseText;
      // console.log(text);
      var list = JSON.parse(text);
      console.log(list);


      var html = "";
      list.forEach(({ goodsId, goodsName, goodsMsg, goodsImg, goodsPrice, buyNum }) => {
        html += `<tr>
                    <td class="checkbox">
                        <input class="check-one check" type="checkbox" />
                    </td>
                    <td class="goods">
                        <img src="${goodsImg}" alt="" />
                        <span>${goodsName}</span>
                    </td>
                    <td class="price">${goodsPrice.toFixed(2)}</td>
                    <td class="count">
                        <span class="reduce">${buyNum > 1 ? "-" : ""}</span>
                        <input class="count-input" type="text" value="${buyNum}" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">${(buyNum * goodsPrice).toFixed(2)}</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>`;
      })
      tbody.innerHTML = html;


    }
  }


  // ajax动态生成和绑定事件  
  // 问题 由于ajax是异步的 会先执行主线程 将异步任务放到任务队列中,等主线程全部执行完毕,任务队列通知主线程 => 异步任务可以执行 => 才会放到主线程执行 

  // 直接在ajax之后绑定事件  => 无法绑定(还没有生成)

  // 1. 

  console.log(addList);  // []
  console.log(reduceList); // []

  // 点击加号
  // (1)加法要求 
  // 点击 “+”     输入框  数量 加一 
  //             小计更新  =  单价*数量
  //             减号按钮的 “-”  出现 
  for (let i = 0; i < addList.length; i++) {
    let add = addList[i];
    add.onclick = function () {
      console.log(this, add);

      // a. 输入框  数量 加一
      // var countInp = this.previousElementSibling;
      var countInp = prev(this);  // this => 被点击的元素(加号)
      console.log(countInp);
      var num = countInp.value;  // 取值
      num++;  //自增
      countInp.value = num; //赋值(更新到页面)

      // b.小计更新  =  单价*数量
      // 数量  =>  num
      // 单价  =>  先找单价的元素
      var countTd = parent(this);
      var priceTd = prev(countTd);
      var subtotalTd = next(countTd);

      var price = priceTd.innerText * 1;

      subtotalTd.innerText = (price * num).toFixed(2);

      // c. 减号按钮的 “-”  出现 
      var reduce = prev(countInp);
      console.log(reduce);
      reduce.textContent = "-";

    }
  }

  // 减号
  // 点击减号    输入框  数量 减一   （细节要求  数量为1的时候  不再减）
  //            小计更新  =  单价*数量
  //            减之前  判断  如果数量为1  不能减   
  //            减之后  判断  如果数量为1  减号按钮的 “-” 消失
  for (let i = 0; i < reduceList.length; i++) {
    var reduce = reduceList[i];
    reduce.onclick = function () {
      // console.log(this,reduce);
      // a. 输入框  数量 减一   （细节要求  数量为1的时候  不再减）
      var countInp = next(this);
      var num = countInp.value;  // 取值

      // c. 减之前  判断  如果数量为1  不能减  
      if (num == 1) {
        return false; //  函数遇到return就停止了 后续的代码不在执行
      }
      num--;  //自减
      // d. 减之后  判断  如果数量为1  减号按钮的 “-” 消失  (2切换到1)
      if (num == 1) {
        this.textContent = "";
      }

      countInp.value = num; //赋值(更新到页面)

      // b.小计更新  =  单价*数量
      // 数量  =>  num
      // 单价  =>  先找单价的元素
      var countTd = parent(this);
      var priceTd = prev(countTd);
      var subtotalTd = next(countTd);

      var price = priceTd.innerText * 1;

      subtotalTd.innerText = (price * num).toFixed(2);

    }
  }













  function parent(ele) {
    return ele.parentElement || ele.parentNode;
  }
  function prev(ele) {
    return ele.previousElementSibling || ele.previousSibling;
  }
  function next(ele) {
    return ele.nextElementSibling || ele.nextSibling;
  }

  function isAllChecked() {
    var flag = true; // 假设全部被选中   => 找到一个未选中的即可推翻假设
    for (var j = 0; j < checkOneList.length; j++) {
      var item = checkOneList[j];
      if (!item.checked) {  //item.checked == false
        flag = false;
        break;
      }
    }
    checkAll.checked = checkOneList.length > 0 ? flag : false;
  }







</script>

</html>